<!--
* @description 巡检记录详情
* @author zywu
* @date 2021/03/02 15:34:11
!-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    :title="dataForm.name+'详情'"
    width="720px"
    top="10vh"
    :visible.sync="visible"
    v-dialogDrag
  >
    <div class="inspect-detail">
      <div class="inspect-detail__row">所属巡检计划：{{dataForm.planId}}</div>
      <div class="inspect-detail__row">
        <h3>任务完成时间线：</h3>
      </div>
      <div class="inspect-detail__row">
        <el-timeline>
          <el-timeline-item v-if="dataForm.status==2" :timestamp="dataForm.endTime" placement="top">
            <el-card>
              <p>任务结束</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item v-for="(item) in timeAxis" :key="item.id" :timestamp="item.createTime" placement="top">
            <el-card>
              <template v-if="item.type!=3">
                <p>{{item.description}}</p>
              </template>
              <template v-else>
                <p class="node-head">
                  <el-tag
                    :type="item.pointResult==1?'success':'danger'"
                    style="margin-right:10px;"
                  >{{item.pointResult==1?'':'不'}}合格</el-tag>
                  <el-tag
                    v-if="item.isResolveProblem==1"
                    type="success"
                    effect="dark"
                    style="margin-right:10px;"
                  >现场已解决问题</el-tag>
                  <el-tag
                    v-if="item.isResolveProblem==2&&item.dangerId"
                    type="warning"
                    effect="dark"
                    style="margin-right:10px;cursor:pointer;"
                    @click="goTroubleDetail(item)"
                  >查看隐患整改单</el-tag>
                  {{item.description}}
                  <i
                    class="el-icon el-icon-arrow-down"
                    :class="{ 'is-active':item.isExpand }"
                    @click="handleExpand(item)"
                  ></i>
                </p>
                <!-- 拍照 -->
                <p v-if="item.pictureUrls.length>0" v-show="!item.isExpand">
                  <template v-for="(picItem,i) in item.pictureUrls">
                    <img
                      v-if="'mp4,3gp,mpeg,mavip4,mov,flv'.includes(picItem.split('.')[picItem.split('.').length - 1].toLowerCase())"
                      :src="require('@/assets/images/video/video-detail.png')"
                      alt="视频图片"
                      :key="i"
                      @click="$imgViewer"
                      :data-imgpreview="item.pictureUrls"
                      :data-imgpreviewindex="i"
                      style="margin:10px 10px 0 0;width: 100px; height: 100px;"
                    />
                    <img
                      v-else
                      :src="picItem"
                      alt="图片"
                      :key="i"
                      @click="$imgViewer"
                      :data-imgpreview="item.pictureUrls"
                      :data-imgpreviewindex="i"
                      style="margin:10px 10px 0 0;width: 100px; height: 100px;"
                    />
                  </template>
                  <!-- <el-image
                    v-for="(picItem,i) in item.pictureUrls"
                    :key="i"
                    :src="picItem"
                    :preview-src-list="item.pictureUrls"
                    style="margin:10px 10px 0 0;width: 100px; height: 100px;"
                  ></el-image>-->
                </p>
                <task-point-content
                  v-show="item.isExpand"
                  :dataInfo="{pointId:item.pointId,taskId:item.taskId}"
                  :formatPicUrl="formatPicUrl"
                ></task-point-content>
              </template>
            </el-card>
          </el-timeline-item>
          <el-timeline-item :timestamp="dataForm.createTime" placement="top">
            <el-card>
              <p>任务生成</p>
            </el-card>
          </el-timeline-item>
          <!-- <el-timeline-item timestamp="2018/4/3" placement="top">
            <el-card>
              <p class="node-head">
                <el-tag type="success" style="margin-right:10px;">合格</el-tag>某某某 完成 点位1 的巡检
                <i class="el-icon el-icon-arrow-down" @click="handleExpand()"></i>
              </p>
              <p class="node-row">检查内容XXXXX</p>
              <p class="node-row">
                <el-radio-group v-model="radio" disabled>
                  <el-radio :label="1">合格</el-radio>
                  <el-radio :label="2">不合格</el-radio>
                </el-radio-group>
              </p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2018/4/3" placement="top">
            <el-card>
              <p>
                <el-tag type="danger" style="margin-right:10px;">不合格</el-tag>某某某 完成 点位1 的巡检
              </p>
              <p class="node-row">检查内容XXXXX</p>
              <p class="node-row">
                <el-radio-group v-model="radio" disabled>
                  <el-radio :label="1">A</el-radio>
                  <el-radio :label="2">B</el-radio>
                  <el-radio :label="3">C</el-radio>
                </el-radio-group>
              </p>
            </el-card>
          </el-timeline-item>-->
        </el-timeline>
      </div>
      <div class="inspect-detail__row">
        <h3>未完成的巡检点位：{{noExaminePointList.length}}个</h3>
      </div>
      <div class="inspect-detail__row">
        <el-tag
          v-for="item in noExaminePointList"
          :key="item.id"
          disable-transitions
          style="margin:0 10px 10px 0;"
        >{{item.name}}</el-tag>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getInspectTaskPointListForClient } from '@/api/inspectx'
import TaskPointContent from './TaskPointContent.vue'
export default {
  props: {
    formatPicUrl: {
      type: Function,
      default: function () {},
    },
  },
  data() {
    return {
      visible: false,
      radio: 1,
      dataForm: {
        name: '',
        planId: '',
      },
      noExaminePointList: [],
      timeAxis: [],
    }
  },

  components: { TaskPointContent },

  computed: {},

  created() {},

  mounted() {},

  methods: {
    goTroubleDetail(n) {
      this.$emit('goTroubleDetail', n.dangerId)
    },
    init(row) {
      this.noExaminePointList = []
      this.timeAxis = []
      this.dataForm = {
        name: '',
        planId: '',
      }
      this.visible = true
      getInspectTaskPointListForClient({ taskId: row.id }).then((res) => {
        let {
          name,
          planId,
          createTime,
          endTime,
          noExaminePointList,
          timeAxis,
          picList,
        } = res.data
        this.dataForm = { name, planId, createTime, endTime }
        this.noExaminePointList = noExaminePointList
        this.timeAxis = timeAxis.map((n) => {
          n.isExpand = false
          let pics = []
          picList
            .filter((m) => {
              return m.pointId == n.pointId
            })
            .forEach((m) => {
              pics = pics.concat(m.contentResult.split(','))
            })
          n.pictureUrls = pics
          return n
        })
      })
    },
    handleExpand(item) {
      this.$set(item, 'isExpand', !item.isExpand)
    },
  },
}
</script>
<style lang='scss'>
.inspect-detail {
  .el-radio__input.is-checked .el-radio__inner {
    border-color: #409eff;
    background: #409eff;
  }
  .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
    background-color: #fff;
  }
  &__row {
    margin-bottom: 20px;
  }
  .node-head {
    position: relative;
  }
  .node-row {
    margin-top: 10px;
    .el-tag {
      margin: 0 10px 0 0;
    }
  }
  .el-icon-arrow-down {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -12px;
    padding: 5px;
    cursor: pointer;
    transition: all 0.2s;
    &:hover {
      color: #333;
    }
    &.is-active {
      transform: rotate(180deg);
    }
  }
}
</style>
